<!--
 * @Description: 计算器-债券表格
  * @Version: 1.0
 * @Autor: chenwg
 * @Date: 2024-01-16 19:11:31
 * @LastEditors: chenwg
 * @LastEditTime: 2024-01-16 19:11:31
-->
<template>
  <jy-table
    :data="stockTableData"
    class="stockTableClass"
    :loading="stockLoading"
    :cell-style="cellStyle"
    :checkbox-config="{
      highlight: true,
    }"
    @checkbox-all="checkTable"
    @checkbox-change="checkTable"
  >
    <!-- <jy-column type="seq" width="60" title=" "></jy-column> -->
    <jy-column
      v-for="i in stockHeader"
      :key="i.field"
      :field="i.field"
      :title="i.title"
      :align="i.align"
      :minWidth="i.minWidth"
    >
      <template #default="{ row, rowIndex }">
        <div v-if="i.field == 'type'">
          <span>{{ row[i.field] ? row[i.field] : '--' }}</span>
        </div>
        <div v-else-if="i.field == 'side'" class="flexStyle">
          <div >
            <jy-select size="mini" v-model="row[i.field]" placeholder="请选择">
              <jy-option
                v-for="item in sideOpts"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </jy-option>
            </jy-select>
          </div>
        </div>
        <div v-else-if="i.field == 'date'" class="flexStyle">
          <jy-date-picker
            v-model="row[i.field]"
            type="date"
            placeholder="请选择日期"
            showToday
            :size="size"
          >
          </jy-date-picker>
        </div>
        <!-- <div v-else-if="i.field == 'maturityYield'" class="flexStyle"></div>
        <div v-else-if="i.field == 'netPrice'" class="flexStyle"></div>
        <div v-else-if="i.field == 'exerciseYield'" class="flexStyle"></div>
        <div v-else-if="i.field == 'accruedInterest'" class="flexStyle"></div>
        <div v-else-if="i.field == 'fullPrice'" class="flexStyle"></div>
        <div v-else-if="i.field == 'settlementAmount'" class="flexStyle"></div>
        <div v-else-if="i.field == 'duration'" class="flexStyle"></div> -->
        <div v-else class="flexStyle">
          <jy-input size="mini"
            v-model="row[i.field]"
            placeholder="请输入内容"
            class="normal-input"
          ></jy-input>
          <span v-show="i.field == 'maturityYield' || i.field == 'exerciseYield'">%</span>
        </div>
        <!-- <div v-else>
        <span >{{ row[i.field] ? row[i.field] : '--' }}</span>

        </div> -->
      </template>
    </jy-column>
  </jy-table>
</template>

<script>
import bondBox from '@/components-gildata/selectCode/bondBox'
import { stockHeader } from '../tableSetting.js'
import { deepClone } from '@/utils/dataBrowser'
export default {
  components: {
    bondBox,
  },
  props: {
    stockLoading: {
      default: false,
      type: Boolean,
    },
  },
  data() {
    return {
      size: 'mini',
      editConfig: { trigger: 'click', mode: 'cell' },
      platecode: '13',
      keyghostype: '5000',
      stockTableData: [
        {
          type: '期初',
          side: '买入',
          date: '20233-12-19 ',
          maturityYield: '20',
          netPrice: '20',
          exerciseYield: '20',
          accruedInterest: '1000.28',
          fullPrice: '20',
          settlementAmount: '1000.28',
          duration: '1000.28',
        },
        {
          type: '期末',
          side: '卖出',
          date: '20233-12-19',
          maturityYield: '20',
          netPrice: '20',
          exerciseYield: ' 20',
          accruedInterest: '1000.28',
          fullPrice: '20',
          settlementAmount: '1000.28',
          duration: '1000.28',
        },
      ],
      stockHeader,
      checkedLists: [],
      sideOpts: [
        {
          value: '1',
          label: '买入',
        },
        {
          value: '2',
          label: '卖出',
        },
      ],
    }
  },
  methods: {
    changeValue(val, rowIndex) {
      if (!val && val !== 0) {
        this.stockTableData[rowIndex].code = ''
        this.stockTableData[rowIndex].bondAbbr = ''
        this.$emit('refreshData', this.stockTableData, 'code')
      }
    },
    changeCode(val, rowIndex) {
      this.stockTableData[rowIndex].code = val.gilcode
      this.stockTableData[rowIndex].bondAbbr = val.secuabbr
      this.$emit('refreshData', this.stockTableData, 'code')
    },
    // 清楚错误数据
    clearError(type, rowIndex) {
      this.stockTableData[rowIndex][type + 'state'] = ''
      this.stockTableData[rowIndex][type] = ''
    },
    // 校验数据
    getCheckInput(type, val, rowIndex) {
      if (type == 'convRatio') {
        if (val > 0 && val <= 100 && val) {
          this.stockTableData[rowIndex].convRatiostate = ''
          this.stockTableData[rowIndex].convRatio = Number(
            this.stockTableData[rowIndex].convRatio
          ).toFixed(2)
        } else {
          this.stockTableData[rowIndex].convRatiostate = 'danger'
        }
      } else {
        if (val > 0 && val < 100000000 && val) {
          this.stockTableData[rowIndex].faceAmountstate = ''
          this.stockTableData[rowIndex].faceAmount = Number(
            this.stockTableData[rowIndex].faceAmount
          ).toFixed(2)
        } else {
          this.stockTableData[rowIndex].faceAmountstate = 'danger'
        }
      }
    },
    // 编辑失去焦点刷新表格数据
    refreshData(type, val, rowIndex) {
      // 校验出错的标红
      this.getCheckInput(type, val, rowIndex)
      this.$emit('refreshData', this.stockTableData, type)
    },
    cellStyle({ column }) {
      if (
        column.property == 'code' ||
        column.property == 'faceAmount' ||
        column.property == 'convRatio'
      ) {
        return {
          backgroundColor: '#FFFBE6',
        }
      }
    },
    // 添加质押券
    addStock() {
      let mockRow = {
        code: '',
        bondAbbr: '',
        faceAmount: '1000.00',
        convRatio: '100.00',
        bondCategory: '',
        bondRating: '',
        issuerRating: '',
        couponRate: '',
        interestPayTimes: '',
        maturityDate: '',
        remainMaturity: '',
        key: Date.now(),
        faceAmountstate: '',
        convRatiostate: '',
      }
      if (this.stockTableData.length < 15) {
        this.stockTableData.push(mockRow)
      } else {
        this.$message({
          message: '添加失败，最多支持添加15只质押券',
          type: 'error',
          plain: true,
        })
      }
    },
    // 清空质押券仅保留第一条但清空数据
    clearStock() {
      this.stockTableData = []
      let mockRow = {
        code: '',
        bondAbbr: '',
        faceAmount: '1000.00',
        convRatio: '100.00',
        bondCategory: '',
        bondRating: '',
        issuerRating: '',
        couponRate: '',
        interestPayTimes: '',
        maturityDate: '',
        remainMaturity: '',
        key: Date.now(),
        faceAmountstate: '',
        convRatiostate: '',
      }
      this.stockTableData.push(mockRow)
      this.$emit('getChecked', 0)
    },
    // 删除质押券（多个/单个）
    deleteStock() {
      this.$confirm('是否要删除勾选的质押券', '通知标题', {
        confirmButtonText: '确 定',
        showCancelButton: true,
        type: 'warning',
        showCloseTooltip: true,
        callback: (action) => {
          if (action == 'confirm') {
            if (this.stockTableData.length == this.checkedLists.length) {
              this.clearStock()
            } else {
              this.stockTableData = this.stockTableData.filter(
                (i) => !this.checkedLists.includes(i.key)
              )
              this.$emit('refreshData', this.stockTableData)
              this.$emit('getChecked', 0)
            }
          }
        },
      })
    },
    // 表格选中事件
    checkTable({ records }) {
      if (records.length) {
        let checked = deepClone(records)
        this.checkedLists = checked.map((i) => {
          return i.key
        })
      }
      this.$emit('getChecked', records.length)
    },
    // 获取数据
    setRows(rows) {
      this.stockTableData = deepClone(rows)
      this.stockTableData.forEach((i, index) => {
        i.key = Date.now() + Math.random()
        this.getCheckInput('convRatio', i.convRatio, index)
        this.getCheckInput('faceAmount', i.faceAmount, index)
      })
    },
  },
}
</script>

<style lang="less" scoped>
.stockTableClass {
  /deep/.jy-autocomplete {
    width: 70% !important;
    min-width: 150px;
  }
  /deep/ .jy-input .jy-input__inner {
    text-align: right;
    font-family: NumberFonts;
    + .jy-input__suffix {
      cursor: pointer;
    }
  }
  .flexStyle {
    display: flex;
    align-items: center;
    span {
      margin-left: 5px;
    }
  }
  /deep/ .bondBox .jy-input {
    background: #fff;
    border: none;
    .jy-input__inner {
      background: #fff;
      text-align: left;
    }
  }
}
</style>
<style lang="less">
.jy-autocomplete-suggestion {
  width: auto !important;
  min-width: 150px;
}
</style>
